<template>
    <div class="home-container">
        <!-- 顶部导航栏 -->
        <el-container style="height: 100%;">
            <el-header class="header">
                <div class="header-content">
                    <h1>图书馆管理系统</h1>
                    <div class="user-info">
                        <span>欢迎您，{{ userName }}！</span>
                        <el-button type="text" @click="handleLogout">退出登录</el-button>
                    </div>
                </div>
            </el-header>

            <!-- 主体内容区 -->
            <el-container>
                <!-- 左侧菜单 -->
                <el-aside width="200px" class="sidebar">
                    <el-menu
                        default-active="home"
                        class="menu"
                        @select="handleMenuSelect"
                    >
                        <el-menu-item index="home" icon="HomeFilled">
                            首页
                        </el-menu-item>
                        <el-menu-item index="books" icon="Book">
                            图书管理
                        </el-menu-item>
                        <el-menu-item index="staff" icon="UserFilled">
                            员工管理
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <!-- 右侧内容区 -->
                <el-main class="main-content">
                    <!-- 统计卡片 -->
                    <el-row :gutter="20" class="stats-row">
                        <el-col :span="8">
                            <el-card class="stat-card" shadow="hover">
                                <div class="stat-header">
                                    <span class="stat-title">图书总数</span>
                                    <el-icon class="stat-icon"><Book /></el-icon>
                                </div>
                                <div class="stat-value">{{ bookCount }}</div>
                                <el-progress :percentage="100" stroke-width="2" class="stat-progress" />
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stat-card" shadow="hover">
                                <div class="stat-header">
                                    <span class="stat-title">员工总数</span>
                                    <el-icon class="stat-icon"><UserFilled /></el-icon>
                                </div>
                                <div class="stat-value">{{ staffCount }}</div>
                                <el-progress :percentage="100" stroke-width="2" class="stat-progress" />
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stat-card" shadow="hover">
                                <div class="stat-header">
                                    <span class="stat-title">可借图书</span>
                                    <el-icon class="stat-icon"><CheckCircleFilled /></el-icon>
                                </div>
                                <div class="stat-value">{{ availableBookCount }}</div>
                                <el-progress
                                    :percentage="availableRate"
                                    stroke-width="2"
                                    class="stat-progress"
                                />
                            </el-card>
                        </el-col>
                    </el-row>

                    <!-- 快捷操作区 -->
                    <el-card class="actions-card" shadow="hover">
                        <h3 class="actions-title">快捷操作</h3>
                        <div class="actions-buttons">
                            <el-button
                                type="primary"
                                size="large"
                                icon="Book"
                                @click="$router.push('/books')"
                            >
                                图书管理
                            </el-button>
                            <el-button
                                type="success"
                                size="large"
                                icon="UserFilled"
                                @click="$router.push('/staff')"
                            >
                                员工管理
                            </el-button>
                            <el-button
                                type="info"
                                size="large"
                                icon="RefreshLeft"
                                @click="refreshData"
                            >
                                刷新数据
                            </el-button>
                        </div>
                    </el-card>

                    <!-- 系统信息 -->
                    <el-card class="system-info" shadow="hover">
                        <h3 class="info-title">系统信息</h3>
                        <el-descriptions column="1" border>
                            <el-descriptions-item label="系统版本">v1.0.0</el-descriptions-item>
                            <el-descriptions-item label="开发技术">Spring Boot + Vue 3</el-descriptions-item>
                            <el-descriptions-item label="最后更新">2024-08-29</el-descriptions-item>
                            <el-descriptions-item label="当前时间">{{ currentTime }}</el-descriptions-item>
                        </el-descriptions>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            // 用户信息
            userName: '',
            // 统计数据
            bookCount: 0,
            staffCount: 0,
            availableBookCount: 0,
            availableRate: 0,
            // 系统时间
            currentTime: ''
        };
    },
    mounted() {
        // 初始化页面数据
        this.initPage();
        // 启动时钟
        this.startClock();
    },
    methods: {
        // 初始化页面
        async initPage() {
            // 获取当前用户信息
            const userStr = localStorage.getItem('library_user');
            if (userStr) {
                const user = JSON.parse(userStr);
                this.userName = user.username || '管理员';
            }

            // 加载统计数据
            await this.loadStatistics();
        },

        // 加载统计数据
        async loadStatistics() {
            try {
                // 获取图书统计
                const booksRes = await this.$axios.get('/books');
                this.bookCount = booksRes.data.length;

                // 计算可借图书数量和占比
                let total = 0;
                let available = 0;
                booksRes.data.forEach(book => {
                    total += book.quantity || 0;
                    available += book.availableQuantity || 0;
                });
                this.availableBookCount = available;
                this.availableRate = total > 0 ? Math.round((available / total) * 100) : 0;

                // 获取员工统计
                const staffRes = await this.$axios.get('/staff');
                this.staffCount = staffRes.data.length;
            } catch (error) {
                this.$message.error('加载统计数据失败：' + (error.message || '网络错误'));
            }
        },

        // 菜单选择处理
        handleMenuSelect(index) {
            switch(index) {
                case 'home':
                    this.$router.push('/home');
                    break;
                case 'books':
                    this.$router.push('/books');
                    break;
                case 'staff':
                    this.$router.push('/staff');
                    break;
            }
        },

        // 刷新数据
        async refreshData() {
            this.$message.loading('正在刷新数据...', 0);
            try {
                await this.loadStatistics();
                this.$message.success('数据刷新成功');
            } catch (error) {
                this.$message.error('刷新失败：' + error.message);
            }
        },

        // 退出登录
        async handleLogout() {
            try {
                await this.$confirm('确定要退出登录吗？', '确认退出', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                // 清除本地存储
                localStorage.removeItem('library_token');
                localStorage.removeItem('library_user');

                // 跳转到登录页
                this.$router.push('/login');
                this.$message.success('退出登录成功');
            } catch (error) {
                // 取消退出，不做处理
            }
        },

        // 启动时钟
        startClock() {
            this.updateTime();
            setInterval(() => this.updateTime(), 1000);
        },

        // 更新当前时间
        updateTime() {
            const date = new Date();
            this.currentTime = date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
    }
};
</script>

<style scoped>
.home-container {
    height: 100%;
    overflow: hidden;
}

/* 顶部导航 */
.header {
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 侧边栏 */
.sidebar {
    background-color: #f5f7fa;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.05);
}

.menu {
    height: 100%;
    border-right: none;
}

/* 主内容区 */
.main-content {
    padding: 20px;
    background-color: #f5f7fa;
    overflow-y: auto;
}

/* 统计卡片 */
.stats-row {
    margin-bottom: 20px;
}

.stat-card {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-title {
    font-size: 16px;
    color: #666;
}

.stat-icon {
    font-size: 24px;
    color: #409eff;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #409eff;
    margin: 10px 0;
}

.stat-progress {
    width: 100%;
}

/* 快捷操作区 */
.actions-card {
    margin-bottom: 20px;
    padding: 15px;
}

.actions-title {
    margin-bottom: 15px;
    color: #333;
}

.actions-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* 系统信息区 */
.system-info {
    padding: 15px;
}

.info-title {
    margin-bottom: 15px;
    color: #333;
}
</style>
